import SuperTableVue from "@/components/SuperTable";
import {chooseOrgConfig} from '@/components/SuperSearch/instance-config.js'
import {QueryUserInfo,SaveOrUpdate,GetById,RemoveUserInfo,SaveOrUpdatePersonRole,GetList} from "@/service";
import {ElButton} from "element-plus";
import {h} from "vue";
import SubmitForm from '@/components/SuperForm/SubmitForm.vue'
import {MessageSuccess,MessageError} from '@/plugin/utils.js'

export default new SuperTableVue({
    tableConfig:{
        props:[//表格的列信息
            { prop: 'name', label: '姓名', minWidth: '150'},
            { prop: 'sex', label: '性别', minWidth: '50',codeMap:[
                {title:'男',value:"1"},
                {title:'女',value:"0"},
            ] },
            { prop: 'email', label: '邮箱', minWidth: '130' },
            { prop: 'phone', label: '电话', minWidth: '100'},
            { prop: 'orgname', label: '组织机构', minWidth: '100'},
            { prop: 'handler',label: '操作', minWidth: '150',slot:function(scope){
                return  (
                        <div>
                            <ElButton type="success" size="small" onClick={()=>this.detail(scope.row)}>{()=>'详情'}</ElButton>
                            <ElButton type="primary" size="small" onClick={()=>{
                                let row = scope.row
                                GetById('organization',scope.row.orgid).then(orgRes=>{
                                    if (orgRes.code==200 &&orgRes.data ){
                                        row.orginfo = [orgRes.data]
                                    }
                                    this.edit(row)
                                })
                            }}>{()=>'编辑'}</ElButton>
                            <ElButton type="warning" size="small" onClick={()=>this.openDialog({
                                component:SubmitForm,
                                title:'角色修改',
                                props:(closeDialog)=>{
                                    debugger
                                    return{
                                        config:{
                                            searchProps:[
                                                { field: 'roleidlist', label: '岗位',type: 'checkboxgroup',span:24,options:async()=>{
                                                    return GetList('role',{}).then((res) => {
                                                        if (res.data && res.code == "200") {
                                                            return res.data?.map(el=>{
                                                                return{
                                                                    value:el.rolekey,
                                                                    title:el.rolename
                                                                }
                                                            })
                                                        }
                                                    });
                                                }},
                                            ]
                                        },
                                        transferData:{...scope.row},
                                        onSubmit:(data)=>{
                                            let params = {
                                                personid:data.id,
                                                personname:data.name,
                                                orgid:data.orgid,
                                                orgname:data.orgname,
                                                roleidlist:data.roleidlist.join(",")
                                            }
                                            SaveOrUpdatePersonRole(params).then(res=>{
                                                if (res.code==200){
                                                    MessageSuccess('修改成功!')
                                                    this.refreshTableData()
                                                    closeDialog()
                                                }else{
                                                    MessageError(res.message||'修改失败!')
                                                }
                                            })
                                        },
                                        onCancel:(data)=>{
                                            closeDialog()
                                        },
                                    }
                                },
                                otherOptions:{
                                    customStyle:{//默认样式
                                        width:'95%',
                                        maxWidth:'100%',
                                        height:'30%',
                                    }
                                }
                            })}>{()=>'角色'}</ElButton>
                            <ElButton type="danger" size="small" onClick={()=>this.delete(scope.row)}>{()=>'删除'}</ElButton>
                        </div>
                        )
                }},
        ],
        getDataFunction:(pagenum,pagesize,queryInfo)=>{//数据初始化方法
            //组参阶段
            let params = {
                pageIndex:pagenum,
                pageSize:pagesize,
                orgid:queryInfo.org?.map(item=>item.id).pop(),
                name:queryInfo.name
            }
            params.currentorgtype="3"
            return QueryUserInfo(params).then(res=>{
                if (res.data && res.code == "200") {
                    const querysuccess = true;
                    const totalcount = res.total;
                    const datalist = res.data
                    return ({querysuccess,totalcount,datalist})
                }
            })
        },

    },
    searchConfig:{//搜索区域配置
        slot:function({queryData,resetQueryData}){
            return (
                <div>
                    <ElButton type="primary" onClick={()=>queryData()}>
                        查询
                    </ElButton>
                    <ElButton type="warning" onClick={()=>resetQueryData()}>
                        重置
                    </ElButton>
                    <ElButton type="success" onClick={()=>this.add()}>
                        新增
                    </ElButton>
                </div>
            )
        },
        props: [
            {
                field: 'org',
                type: 'supersearch',
                label: '组织机构',
                config:chooseOrgConfig,
            },
            {
                field: 'name',
                type: 'input',
                label: '名称',
                placeholder: '请输入名称',
            },
        ],
    },
    rowDetailConfig:{//如果调用this.detail()方法,那么会根据这个配置打开详情界面,如果没有定义这个,但是还是调用了this.detail()方法,那么会根据rowEdit的配置展示
        props:async(row)=>{
            return [
                    { field: 'name', label: '姓名',type: 'input', disabled:true},
                    { field: 'sex', label: '性别',type: 'select',codeMap:[{title:'男',value:"1"},{title:'女',value:"0"}] ,disabled:true},
                    { field: 'email', label: '邮箱',type: 'input', disabled:true},
                    { field: 'phone', label: '电话',type: 'input', disabled:true},
                    { field: 'orgname', label: '组织机构',type: 'input', disabled:true },
                    { field: 'remark', label: '备注',type: 'input', disabled:true },
                ]
        },
    },
    rowEditConfig:{//如果调用this.edit()方法,那么会根据这个配置打开默认的编辑界面,如果不用默认的,那这个就不用定义了
        props:async(row)=>{
            return [
                { field: 'name', label: '姓名',type: 'input', required: true},
                { field: 'sex', label: '性别',type: 'select',options:[{title:'男',value:"1"},{title:'女',value:"0"}] ,required: true},
                { field: 'email', label: '邮箱',type: 'input',  required: true},
                { field: 'phone', label: '电话',type: 'input',required: true},
                { field: 'orginfo', label: '组织机构',type: 'supersearch',config:chooseOrgConfig,required: true },
                { field: 'remark', label: '备注',type: 'input', required: true },
            ]
        },
        editDataFunction:(formdata)=>{
            let params = {
                orgid:formdata.orginfo?.[0].id,
                orgname:formdata.orginfo?.[0].name,
                email:formdata.email,
                id:formdata.id,
                name:formdata.name,
                phone:formdata.phone,
                sex:formdata.sex,
                remark:formdata.remark,
                personorgid:formdata.personorgid
            }
            return SaveOrUpdate('person',params).then(res=>{
                const ok = res.data && res.code == "200";
                const msg = res?.message;
                return ({ok,msg})
            })
        },
    },
    rowDeleteConfig:{//如果调用this.delete()方法
        deleteDataFunction:async(row)=>{
            return RemoveUserInfo(row).then(res=>{
                const ok = res.data && res.code == "200";
                const msg = res?.message;
                return ({ok,msg})
            })
        },
    },
})
























//如果需要在外层包裹
// export default {
//     setup:()=>{
//         return ()=><div style={{padding:'10px',height:'calc(100% - 20px)'}}>
//             {
//                 h(new SuperTableVue({
//                     detailPropList:[//表格的列信息
//                         { prop: 'rolekey', label: '岗位key', minWidth: '150'},
//                         { prop: 'rolename', label: '岗位名称', minWidth: '50',},
//                         { prop: 'remark', label: '备注', minWidth: '130' },
//                         { prop: 'createtime', label: '创建时间', minWidth: '100',timeStampFormat:"YYYY-MM-DD HH:mm:ss"},
//                         { prop: 'updatetime', label: '更新时间', minWidth: '100',timeStampFormat:"YYYY-MM-DD HH:mm:ss"},
//                         { prop: 'handler',label: '操作', minWidth: '150'},
//                     ],
//                     showExportExcel:false,
//                     searchConfig:{//搜索区域配置
//                         searchProps: [
//                             {
//                                 field: 'rolename',
//                                 type: 'input',
//                                 label: '岗位名称',
//                                 placeholder: '请输入岗位名称'
//                             },
//                         ]
//                     },
//                     getTableDataFunction:(pagenum,pagesize,queryInfo)=>{//数据初始化方法
//                         //组参阶段
//                         let params = {
//                             pageIndex:pagenum,
//                             pageSize:pagesize,
//                             rolename:queryInfo.rolename
//                         }
//                         return GetRolePermission(params).then(res=>{
//                             if (res.data && res.code == "200") {
//                                 const querysuccess = true;
//                                 const totalcount = res.total;
//                                 const datalist = res.data
//                                 return ({querysuccess,totalcount,datalist})
//                             }
//                         })
//                     }
//                 }))
//             }
//         </div>
//     }
// }
